<!--
 * @Author: Sam
 * @Date: 2020-10-22 11:51:41
 * @LastEditTime: 2021-06-01 14:32:55
 * @LastEditors: Sam
 * @Description: 
 * @FilePath: \resourcesf:\thework\ygboost-eui\src\components\app\edit\setting\amoebadepartpeopleconfigure\amoebadepartpeopleconfigureEdit.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="padding-lr">
    <el-row style="line-height:28px">
      <el-col :span="10" class="text-left">
        <el-date-picker
          size="mini"
          v-model="effectTime"
          type="month"
          placeholder="请选择月份"
          value-format="yyyy-MM"
        >
        </el-date-picker>
        <i
          class="el-icon-circle-plus text-green text-xl margin-left-lg pointer"
          style="line-height:28px"
          @click="add"
        ></i>
      </el-col>

      <el-col :span="10" class="text-left"> 总人数：{{ totalPeople }} </el-col>
      <el-col :span="4" class="text-right">
        <el-button type="primary" size="mini" @click="saveInfo">
          保存
        </el-button>
      </el-col>
    </el-row>

    <el-row class="margin-top">
      <el-col
        class="margin-bottom-sm"
        :span="8"
        v-for="(item, index) in departAndNumList"
        :key="index"
      >
        <el-row :gutter="3">
          <el-col :span="14">
            <el-select
              v-model="item.department"
              clearable
              size="mini"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, val) in options"
                :key="val"
                :label="item"
                :value="val"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input
              v-model.number="item.num"
              size="mini"
              placeholder="人数"
            ></el-input>
          </el-col>
          <el-col :span="3">
            <i
              class=" el-icon-remove text-red text-xl pointer"
              style="line-height:28px"
              @click="remove(index)"
            ></i>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { m } from "@/store/yg/common/local";
import { ajax } from "@/store/yg/common/utils";
import { clone } from "@/utils/clone";
import { isNoEmptyObject, closeDialog } from "@/utils";
// import TableComponent from "./TableComponent";
const Tinymce = () => import("@/components/app/components/Tinymce");
export default {
  props: ["data"],
  data() {
    return {
      effectTime: "",
      options: {},
      departAndNumList: []
    };
  },

  components: {
    Tinymce
  },
  mounted() {
    this.init();
    console.log("this.$store.state :>> ", this.$store.state.edit.row);
  },
  computed: {
    totalPeople() {
      let num = 0;
      for (const i of this.departAndNumList) {
        if (i.num) {
          num += parseInt(i.num);
        }
      }
      return num;
    }
  },

  methods: {
    async init() {
      const { data } = await ajax("initData", {});
      if (!data) return;
      this.options = data;

      if (this.$store.state.edit.row.id) {
        this.setData();
      } else {
        const arr = [];
        for (const i in data) {
          arr.push({
            department: i,
            num: ""
          });
        }
        this.departAndNumList = arr;
      }
    },
    setData() {
      const row = this.$store.state.edit.row;
      this.effectTime = row.effectTime;

      const arr = [];
      for (const i in row.departAndNumMap) {
        arr.push({
          department: i,
          num: row.departAndNumMap[i]
        });
      }
      this.departAndNumList = arr;
      // this.departAndNumList =
    },
    async saveInfo() {
      if (!this.effectTime) {
        this.$message.error("请选择月份");
        return;
      }

      const departAndNumMap = {};

      for (const i of this.departAndNumList) {
        if (i.num) {
          departAndNumMap[i.department] = i.num;
        }
      }

      if (!isNoEmptyObject(departAndNumMap)) {
        this.$message.error("请填写数据");
        return;
      }

      const param = {
        id: this.$store.state.edit.row.id,
        effectTime: this.effectTime,
        departAndNumMap: departAndNumMap
      };

      const { code, message } = await ajax("save", param);
      if (code === 200) {
        this.$message.success("保存成功！");
        closeDialog();
      } else {
        this.$message.error(message || "保存失败！");
      }
    },
    add() {
      this.departAndNumList.push({
        department: "",
        num: ""
      });
    },
    remove(i) {
      this.departAndNumList.splice(i, 1);
    }
  }
};
</script>

<style scoped>
/deep/.el-select {
  width: 100%;
}
.padding-lr-xl >>> .el-dialog__header {
  text-align: left;
}
</style>
